<template>
  <div class="nav">
    <router-link to="/"><h4>武平公交线路列表</h4> </router-link> |
    <router-link to="/about"> <h4>关于</h4></router-link>
  </div>
  <Suspense>
    <template #default>
      <router-view class="view-main"/>
    </template>
    <template #fallback>
      <h1>Loading async ...</h1>
    </template>
  </Suspense>
  <footer>
    <div class="footer-line"></div>
    <span class="copyright">Copyright © 2020-2021 linchuanqiao </span>
</footer>
</template>
<style>
@media (min-width: 544px) {
  footer {
    margin: 0 14px;
  }
}
@media (max-width: 544px) {
  footer {
    text-align: center;
  }
}
body {
  font-family: serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
  color: #212529;
  text-align: left;
  margin: 0 auto;
}
p {
  margin: 0;
}
.nav,
.view-main {
  margin: 10px;
}
.nav {
  height: 32px;
  line-height: 32px;
}
.view-main {
  min-height: calc(100vh - 134px);
}
.nav h4 {
  display: inline-block;
  margin: 0;
}
footer {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji;
  font-size: 12px;
  color: #586069;
  line-height: 50px;
  border-top: 1px solid#c8ced6;
  height: 70px;
  margin-top: 10px;
}
.footer-line {
  border-top: 1px solid #e2e8f0;
}
footer a {
  text-decoration-line: none;
}
</style>